<script setup lang="ts">
import { ref } from 'vue';
import { handleMessage } from '@/utils/globalEvent';

// 多少秒后执行
const delay = Number(import.meta.env.VITE_DELAY) / 1000;
// 立即执行
const immediate = 'immediate';
// 输入框绑定的值
const inputValue = ref('');

// 防抖
const handleDebounce = () => {
	handleMessage('我是防抖按钮触发的事件');
};
// 立即执行
const immediateDebounce = () => {
	handleMessage('我是防抖立即执行按钮触发的事件');
};
// 输入框防抖
const handleInputDebounce = () => {
	handleMessage('我是防抖输入框触发的事件');
};
</script>

<template>
	<div class="debounce">
		<el-button v-debounce="handleDebounce">防抖按钮({{ delay }}秒后执行)</el-button>
		<el-button v-debounce:[immediate]="immediateDebounce">防抖立即执行按钮</el-button>
		<el-input v-model="inputValue" v-debounce="handleInputDebounce"></el-input>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
